<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>{{message}}</h1>

</div>
<script src="../../JavaScript/vue.js"></script>
<script>
    /*
    watch:用于声明在数据更改时调用的侦听回调。
    watch 选项期望接受一个对象，其中键是需要侦听的响应式组件实例属性 (例如，通过 data 或 computed 声明的属性)——值是相应的回调函数。该回调函数接受被侦听源的新值和旧值。
    除了一个根级属性，键名也可以是一个简单的由点分隔的路径，例如 a.b.c。注意，这种用法不支持复杂表达式——仅支持由点分隔的路径。如果你需要侦听复杂的数据源，可以使用命令式的 $watch() API。
    值也可以是一个方法名称的字符串 (通过 methods 声明)，或包含额外选项的对象。当使用对象语法时，回调函数应被声明在 handler 中。额外的选项包含：
    immediate：在侦听器创建时立即触发回调。第一次调用时，旧值将为 undefined。
    deep：如果源是对象或数组，则强制深度遍历源，以便在深度变更时触发回调。详见深层侦听器。
    flush：调整回调的刷新时机。详见回调的触发时机及 watchEffect()。
    onTrack / onTrigger：调试侦听器的依赖关系。详见侦听器调试。
    声明侦听器回调时避免使用箭头函数，因为它们将无法通过 this 访问组件实例。
    * */
    const app = Vue.createApp({
        data() {
            return {
                message: "hello Vue",
                person: {
                    name: "陶品奇",
                    age: 18,
                }
            }
        },
        watch: {
            // 监听简单数据类型的变化
            message:{
                deep:true,//深度监听
                immediate: true,//立即监听
                handler(newValue,oldValue){ //处理函数
                    console.log("新值是", newValue)
                    console.log("旧值是", oldValue)
                }
            },
            // 监听对象的变化
            person:{
                deep:true,//深度监听
                immediate: true,//立即监听
                handler(newValue,oldValue){//处理函数
                    console.log("新对象是", newValue)
                    console.log("旧对象是", oldValue)
                }
            }
        },
        created(){
            this.$watch("person",()=>{
                console.log("新对象是", newValue)
                console.log("旧对象是", oldValue)
            },{deep:true,immediate:true})
        }
    })
    app.mount("#app")
</script>
</body>
</html>